<!DOCTYPE html>
<html>
<head>
	<title>getLineDash</title>
</head>
<body>
	<canvas id="canvas" width="300" height="200px" style="border: 1px solid #ccc"></canvas>

	<script type="text/javascript">
		// var canvas = document.getElementById("canvas");
		// var ctx = canvas.getContext("2d");

		// ctx.setLineDash([5, 15]);
		// console.log(ctx.getLineDash()); // [5, 15]

		// ctx.beginPath();
		// ctx.moveTo(0,100);
		// ctx.lineTo(400, 100);
		// ctx.stroke();
		function drawDashedLine(pattern) {
			ctx.beginPath();
			ctx.setLineDash(pattern);
			ctx.moveTo(0, y);
			ctx.lineTo(300, y);
			ctx.stroke();
			y += 20;
		}

		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');
		let y = 15;

		drawDashedLine([]);
		drawDashedLine([1, 1]);
		drawDashedLine([10, 10]);
		drawDashedLine([20, 5]);
		drawDashedLine([15, 3, 3, 3]);
		drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
		drawDashedLine([12, 3, 3]);  // Equals [12, 3, 3, 12, 3, 3]


	</script>

</body>
</html>